<template>
  <div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>面经后台</el-breadcrumb-item>
        <el-breadcrumb-item>面经管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <div class="header">
        <span>共{{ total }}条记录</span>
        <el-button class="btn" type="primary" round @click="openDraw('add')">+ 添加面经</el-button>
      </div>

      <el-table :data="tabledata">
        <el-table-column prop="title" label="标题" width="180">
        </el-table-column>
        <el-table-column prop="username" label="作者" width="180">
        </el-table-column>
        <el-table-column prop="likeCount" label="点赞">
        </el-table-column>
        <el-table-column prop="views" label="浏览量">
        </el-table-column>
        <el-table-column prop="createtime" label="更新时间">
        </el-table-column>
        <el-table-column prop="operate" label="操作">
          <template #default="{ row }">
            <i class="el-icon-view" @click="openDraw('view', row.id)"></i>
            <i class="el-icon-edit" @click="openDraw('edit', row.id)"></i>
            <i class="el-icon-delete" @click="del(row.id)"></i>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :page-size="1" :pager-count="5" layout="prev, pager, next" :total="10">

      </el-pagination>
      <el-drawer :title="drawerTitle" :visible.sync="isdrawer" size="50%" :before-close="handleClose">
        <el-form label-width="80px">
          <el-form-item label="标题" class="is-required">
            <el-input v-model="form.stem"></el-input>
          </el-form-item>
          <el-form-item label="内容" class="is-required">
            <quillEditor v-model="form.content"></quillEditor>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">确认</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>

    </div>
  </div>
</template>

<script>
import { getArticleAPI, delArticleAPI } from '@/api/article'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  name: "ArticleIndex",
  data() {
    return {
      pageNum: 10,
      page: 0,
      total: '',
      tabledata: [],
      isdrawer: false,
      type: '',
      form: {
        stem: '',
        content: '',
      }
    }
  },
  components: {
    quillEditor
  },
  mounted() {
    this.getArticleList()

  },
  computed: {
    drawerTitle() {
      let title = '标题'
      if (this.type === 'add') title = '添加面经'
      if (this.type === 'view') title = '面经浏览'
      if (this.type === 'edit') title = '编辑面经'
      return title
    }
  },
  methods: {
    async getArticleList() {
      const res = await getArticleAPI(this.pageNum, this.page)
      console.log(res);
      this.tabledata = res.data.data;
      this.total = res.data.total;
    },
    openDraw(type, id) {
      this.type = type
      this.isdrawer = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    async del(id) {
      // console.log(id);
      const res = await delArticleAPI(id)
      console.log(res);
      if (res.data.status !== 200) {
        this.$message.error('删除失败');
      } else {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      }
      this.getArticleList()
    }

  }
};
</script>

<style lang="scss" scoped>
.header {
  margin-top: 30px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .btn {
    height: 35px;
    line-height: 1px;
  }
}

i {
  padding-right: 15px;
}
</style>
